﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/assets/img/icon.png}">

    <!-- Title -->
    <title>Zuka - Clean, Minimal eCommerce Bootstrap 4 Template</title>

    <!-- ************************* CSS Files ************************* -->

    <!-- All Plugins CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Revoulation CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/revoulation.css}">

    <!-- style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/main.css}">

    <!-- modernizr JS
    ============================================ -->
    <script th:src="@{/assets/js/vendor/modernizr-2.8.3.min.js}"></script>
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js}"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
    <![endif]-->
</head>

<body class="default-color">

    <!-- Preloader Start -->
    <div class="zuka-preloader active">
        <div class="zuka-preloader-inner h-100 d-flex align-items-center justify-content-center">
            <div class="zuka-child zuka-bounce1"></div>
            <div class="zuka-child zuka-bounce2"></div>
            <div class="zuka-child zuka-bounce3"></div>
        </div>
    </div>
    <!-- Preloader End -->

    <!-- Main Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header class="header header-style-1 border-bottom">
            <div class="header-inner">
                <div class="header-top headroom headroom--fixed">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-2 col-6">
                                <!-- Logo Start Here -->
                                <a href="index.html" class="logo-box">
                                    <figure class="logo--normal"> 
                                        <img th:src="@{/assets/img/logo/logo.png}" alt="Logo"/>
                                    </figure>
                                </a>
                                <!-- Logo End Here -->
                            </div>
                            <div class="col-lg-8 d-none d-lg-block">
                                <!-- Main Navigation Start Here -->
                                <nav class="main-navigation">
                                    <ul class="mainmenu mainmenu--centered">
                                        <li class="mainmenu__item menu-item-has-children megamenu-holder active">
                                            <a href="index.html" class="mainmenu__link">
                                                <span class="mm-text">Home</span>
                                            </a>
                                            <ul class="megamenu two-column">
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Demo Group 01</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="index.html">
                                                                <span class="mm-text">Demo 01</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-02.html">
                                                                <span class="mm-text">Demo 02</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-03.html">
                                                                <span class="mm-text">Demo 03</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-04.html">
                                                                <span class="mm-text">Demo 04</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-05.html">
                                                                <span class="mm-text">Demo 05</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Demo Group 02</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="index-06.html">
                                                                <span class="mm-text">Demo 06</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-07.html">
                                                                <span class="mm-text">Demo 07</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-08.html">
                                                                <span class="mm-text">Demo 08</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-09.html">
                                                                <span class="mm-text">Demo 09</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-10.html">
                                                                <span class="mm-text">Demo 10</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children megamenu-holder">
                                            <a href="shop-sidebar.html" class="mainmenu__link">
                                                <span class="mm-text">Shop</span>
                                                <span class="badge">Hot</span>
                                            </a>
                                            <ul class="megamenu four-column">
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Shop Layout</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="shop-fullwidth.html">
                                                                <span class="mm-text">FullWidth</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="mm-text">with Sidebar</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-two-columns.html">
                                                                <span class="mm-text">Two columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-three-columns.html">
                                                                <span class="mm-text">Three columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-collections.html">
                                                                <span class="mm-text">With collections</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-instagram.html">
                                                                <span class="mm-text">Shop Instagram</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Single Product</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="product-details.html">
                                                                <span class="mm-text">Simple 01</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-02.html">
                                                                <span class="mm-text">Simple 02</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-sticky.html">
                                                                <span class="mm-text">Sticky Info</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-gallery.html">
                                                                <span class="mm-text">Thumbnail Gallery</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-sidebar.html">
                                                                <span class="mm-text">Sidebar</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-grouped.html">
                                                                <span class="mm-text">Grouped</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-affiliate.html">
                                                                <span class="mm-text">Affiliate</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-configurable.html">
                                                                <span class="mm-text">Configurable</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Shop Pages</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="my-account.html">
                                                                <span class="mm-text">My Account</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="cart.html">
                                                                <span class="mm-text">Shopping Cart</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="checkout.html">
                                                                <span class="mm-text">Check Out</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <span class="mm-text">Wishlist</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="order-tracking.html">
                                                                <span class="mm-text">Order tracking</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <span class="mm-text">compare</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="banner-holder">
                                                    <div class="megamenu-banner">
                                                        <div class="megamenu-banner-image"></div>
                                                        <div class="megamenu-banner-info">
                                                            <span>Autumn Winter 2019</span>
                                                            <h3>new <strong>arrival</strong></h3>
                                                        </div>
                                                        <a href="shop-sidebar.html" class="megamenu-banner-link"></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children has-children">
                                            <a href="#" class="mainmenu__link">
                                                <span class="mm-text">Pages</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="about-us.html">
                                                        <span class="mm-text">About Us</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="team.html">
                                                        <span class="mm-text">Our teams</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="contact-us.html">
                                                        <span class="mm-text">Contact Page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="404.html">
                                                        <span class="mm-text">404 page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="faqs-page.html">
                                                        <span class="mm-text">FAQs page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="coming-soon.html">
                                                        <span class="mm-text">Coming Soon</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item">
                                            <a href="shop-collections.html" class="mainmenu__link">
                                                <span class="mm-text">Collections</span>
                                            </a>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children has-children">
                                            <a href="blog.html" class="mainmenu__link">
                                                <span class="mm-text">Blog</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog Grid</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="blog-02-columns.html">
                                                                <span class="mm-text">Blog 02 Columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog-03-columns.html">
                                                                <span class="mm-text">Blog 03 Columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog.html">
                                                                <span class="mm-text">Blog Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog List</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="blog-classic.html">
                                                                <span class="mm-text">Blog Classic</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog-no-sidebar.html">
                                                                <span class="mm-text">Blog No Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="blog-masonary.html">
                                                        <span class="mm-text">Blog Masonary</span>
                                                    </a>
                                                </li>
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog Details</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="single-post.html">
                                                                <span class="mm-text">Single Post</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="single-post-sidebar.html">
                                                                <span class="mm-text">Single Post Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item">
                                            <a href="shop-instagram.html" class="mainmenu__link">
                                                <span class="mm-text">New Look</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                                <!-- Main Navigation End Here -->
                            </div>
                            <div class="col-lg-2 col-6">
                                <ul class="header-toolbar text-right">
                                    <li class="header-toolbar__item d-lg-none">
                                        <a href="#mobileMenu" class="toolbar-btn menu-btn">
                                            <span class="hamburger-icon">
                                            </span>
                                        </a> 
                                    </li>
                                    <li class="header-toolbar__item">
                                        <a href="#searchForm" class="search-btn toolbar-btn">
                                            <i class="dl-icon-search1"></i>
                                        </a>
                                    </li>
                                    <li class="header-toolbar__item">
                                        <a href="#miniCart" class="mini-cart-btn toolbar-btn">
                                            <i class="dl-icon-cart25"></i>
                                            <sup class="mini-cart-count">2</sup>
                                        </a>
                                    </li>
                                    <li class="header-toolbar__item d-none d-lg-block">
                                        <a href="#sideNav" class="toolbar-btn">
                                            <span class="hamburger-icon">
                                            </span>
                                        </a>                                    
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mobile-menu-wrapper" id="mobileMenu">
                <div class="mobile-menu-inner">
                    <a href="" class="btn-close">
                        <span class="hamburger-icon">
                        </span>
                    </a>
                    <nav class="mobile-navigation">
                        <ul class="mobile-menu">
                            <li class="menu-item-has-children active">
                                <a href="index.html">
                                    <span class="mm-text">Home</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Demo Group 01</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="index.html">
                                                    <span class="mm-text">Demo 01</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-02.html">
                                                    <span class="mm-text">Demo 02</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-03.html">
                                                    <span class="mm-text">Demo 03</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-04.html">
                                                    <span class="mm-text">Demo 04</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-05.html">
                                                    <span class="mm-text">Demo 05</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Demo Group 02</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="index-06.html">
                                                    <span class="mm-text">Demo 06</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-07.html">
                                                    <span class="mm-text">Demo 07</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-08.html">
                                                    <span class="mm-text">Demo 08</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-09.html">
                                                    <span class="mm-text">Demo 09</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-10.html">
                                                    <span class="mm-text">Demo 10</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="shop-sidebar.html">
                                    <span class="mm-text">Shop</span>
                                    <span class="badge">Hot</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Shop Layout</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="shop-fullwidth.html">
                                                    <span class="mm-text">FullWidth</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-sidebar.html">
                                                    <span class="mm-text">with Sidebar</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-two-columns.html">
                                                    <span class="mm-text">Two columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-three-columns.html">
                                                    <span class="mm-text">Three columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-collections.html">
                                                    <span class="mm-text">With collections</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-instagram.html">
                                                    <span class="mm-text">Shop Instagram</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Single Product</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="product-details.html">
                                                    <span class="mm-text">Simple 01</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-02.html">
                                                    <span class="mm-text">Simple 02</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-sticky.html">
                                                    <span class="mm-text">Sticky Info</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-gallery.html">
                                                    <span class="mm-text">Thumbnail Gallery</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-sidebar.html">
                                                    <span class="mm-text">Sidebar</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-grouped.html">
                                                    <span class="mm-text">Grouped</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-affiliate.html">
                                                    <span class="mm-text">Affiliate</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-configurable.html">
                                                    <span class="mm-text">Configurable</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Shop Pages</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="my-account.html">
                                                    <span class="mm-text">My Account</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="cart.html">
                                                    <span class="mm-text">Shopping Cart</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="checkout.html">
                                                    <span class="mm-text">Check Out</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="wishlist.html">
                                                    <span class="mm-text">Wishlist</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="order-tracking.html">
                                                    <span class="mm-text">Order tracking</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="compare.html">
                                                    <span class="mm-text">compare</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">
                                    <span class="mm-text">Pages</span>
                                </a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="about-us.html">
                                            <span class="mm-text">About Us</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="team.html">
                                            <span class="mm-text">Our teams</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="contact-us.html">
                                            <span class="mm-text">Contact Page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="404.html">
                                            <span class="mm-text">404 page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="faqs-page.html">
                                            <span class="mm-text">FAQs page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="coming-soon.html">
                                            <span class="mm-text">Coming Soon</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="mobile-menu__item">
                                <a href="shop-collections.html">
                                    <span class="mm-text">Collections</span>
                                </a>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="blog.html">
                                    <span class="mm-text">Blog</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog Grid</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="blog-02-columns.html">
                                                    <span class="mm-text">Blog 02 Columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog-03-columns.html">
                                                    <span class="mm-text">Blog 03 Columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog.html">
                                                    <span class="mm-text">Blog Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog List</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="blog-classic.html">
                                                    <span class="mm-text">Blog Classic</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog-no-sidebar.html">
                                                    <span class="mm-text">Blog No Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="blog-masonary.html">
                                            <span class="mm-text">Blog Masonary</span>
                                        </a>
                                    </li>
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog Details</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="single-post.html">
                                                    <span class="mm-text">Single Post</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="single-post-sidebar.html">
                                                    <span class="mm-text">Single Post Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="shop-instagram.html">
                                    <span class="mm-text">New Look</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <!-- Header Area End -->

        <!-- Breadcrumb area Start -->
        <div class="breadcrumb-area breadcrumb-style-2 pt--75 pt-md--55 pt-sm--35">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <ul class="breadcrumb">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="shop-sidebar.html">Shop Pages</a></li>
                            <li class="current"><span>Product Details</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcrumb area End -->

        <!-- Main Content Wrapper Start -->
        <div id="content" class="main-content-wrapper">
            <div class="page-content-inner enable-full-width">
                <div class="container-fluid">
                    <div class="row pt--40 pt-sm--30">
                        <div class="col-md-6 product-main-image">
                            <div class="product-image">
                                <div class="product-gallery vertical-slide-nav">
                                    <div class="product-gallery__nav-image">
                                        <div class="zuka-element-carousel nav-slider slick-vertical product-slide-nav" 
                                        data-slick-options='{
                                            "slidesToShow": 3,
                                            "slidesToScroll": 1,
                                            "vertical": true,
                                            "swipe": true,
                                            "verticalSwiping": true,
                                            "infinite": true,
                                            "focusOnSelect": true,
                                            "asNavFor": ".main-slider",
                                            "arrows": true, 
                                            "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "fa fa-angle-up" },
                                            "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "fa fa-angle-down" }
                                        }'
                                        data-slick-responsive='[
                                            {
                                                "breakpoint":991, 
                                                "settings": {
                                                    "slidesToShow": 3,
                                                    "vertical": false
                                                } 
                                            },
                                            {
                                                "breakpoint":767, 
                                                "settings": {
                                                    "slidesToShow": 4,
                                                    "vertical": false
                                                } 
                                            },
                                            {
                                                "breakpoint":575, 
                                                "settings": {
                                                    "slidesToShow": 3,
                                                    "vertical": false
                                                } 
                                            },
                                            {
                                                "breakpoint":480, 
                                                "settings": {
                                                    "slidesToShow": 2,
                                                    "vertical": false
                                                } 
                                            }
                                        ]'>
                                            <figure class="product-gallery__nav-image--single">
                                                <img th:src="@{/assets/img/products/prod-14-1-166x208.jpg}" alt="Products">
                                            </figure>
                                            <figure class="product-gallery__nav-image--single">
                                                <img th:src="@{/assets/img/products/prod-13-1-166x208.jpg}" alt="Products">
                                            </figure>
                                            <figure class="product-gallery__nav-image--single">
                                                <img th:src="@{/assets/img/products/prod-13-2-166x208.jpg}" alt="Products">
                                            </figure>
                                            <figure class="product-gallery__nav-image--single">
                                                <img th:src="@{/assets/img/products/prod-12-1-166x208.jpg}" alt="Products">
                                            </figure>
                                        </div>
                                    </div>
                                    <div class="product-gallery__large-image mb-md--30">
                                        <div class="product-gallery__wrapper">
                                            <div class="zuka-element-carousel main-slider image-popup"
                                            data-slick-options='{
                                                "slidesToShow": 1,
                                                "slidesToScroll": 1,
                                                "infinite": true,
                                                "arrows": false, 
                                                "asNavFor": ".nav-slider"
                                            }'>
                                                <figure class="product-gallery__image zoom">
                                                    <img th:src="@{/assets/img/products/prod-14-1.jpg}" alt="Product">
                                                </figure>
                                                <figure class="product-gallery__image zoom">
                                                    <img th:src="@{/assets/img/products/prod-13-1.jpg}" alt="Product">
                                                </figure>
                                                <figure class="product-gallery__image zoom">
                                                    <img th:src="@{/assets/img/products/prod-13-2.jpg}" alt="Product">
                                                </figure>
                                                <figure class="product-gallery__image zoom">
                                                    <img th:src="@{/assets/img/products/prod-12-1.jpg}" alt="Product">
                                                </figure>
                                            </div>
                                            <div class="product-gallery__actions">
                                                <button class="action-btn-2 btn-zoom-popup"><i class="dl-icon-zoom-in"></i></button>
                                                <a href="https://www.youtube.com/watch?v=Rp19QD2XIGM" class="action-btn-2 video-popup"><i class="dl-icon-format-video"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="product-badge sale">Sale</span>
                            </div>
                        </div>
                        <div class="col-md-6 product-main-details mt--10 mt-sm--25">
                            <div class="product-summary">
                                <div class="product-top-meta">
                                    <div class="product-rating mr-auto">
                                        <div class="star-rating star-five">
                                            <span>Rated <strong class="rating">5.00</strong> out of 5</span>
                                        </div>
                                        <a href="" class="review-link">(1 customer review)</a>
                                    </div>
                                    <div class="product-navigation ml-auto">
                                        <a href="#" class="prev"><i class="dl-icon-left"></i></a>
                                        <a href="#" class="next"><i class="dl-icon-right"></i></a>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <h3 class="product-title mb--30 mb-lg--20 mb-sm--10" th:text="${good.gname}"></h3>
                                <div class="product-price-wrapper float-left mb--30 mb-lg--20 mb-sm--10">
                                    <span class="product-price-old">
                                        <span class="money">&pound;60.00</span>
                                    </span>
                                    <span class="product-price-new">
                                        &pound;<span class="money" th:text="${good.price}"></span>
                                    </span>
                                </div>
                                <span class="product-stock in-stock float-right">
                                    <i class="dl-icon-check-circle1"></i>
                                    in stock
                                </span>
                                <div class="clearfix"></div>
                                <p class="product-short-description mb--35 mb-lg--25 mb-sm--15 pb-sm--2" th:text="${good.detail}"></p>
                                <form action="#" class="form--action">
                                    <div class="product-action d-flex align-items-center">
                                        <div class="quantity">
                                            <input type="number" class="quantity-input" name="qty" id="qty" value="1" min="1">
                                        </div>
                                        <button type="button" th:attr="onclick=|addToCart(this, '${good.id}')|" class="btn btn-shape-round btn-style-1 btn-large add-to-cart">
                                            Add To Cart
                                        </button>
                                        <a href="wishlist.html" class="action-btn action-btn-square"><i class="dl-icon-heart2"></i></a>
                                        <a href="compare.html" class="action-btn action-btn-square"><i class="dl-icon-compare2"></i></a>
                                    </div>  
                                </form>
                                <div class="product-extra pt--3 mt--35 mt-lg--25 mt-sm--15">
                                    <a href="#" class="font-size-12"><i class="fa fa-map-marker"></i>Find store near you</a>
                                    <a href="#" class="font-size-12"><i class="fa fa-exchange"></i>Delivery and return</a>
                                </div>
                                <div class="product-meta mt--35 mt-lg--25 mt-sm--15 pt-sm--1">
                                    <span class="sku_wrapper font-size-12">SKU: <span class="sku">REF. LA-887</span></span>
                                    <span class="posted_in font-size-12">Categories: 
                                        <a href="shop-sidebar.html">Fashions</a>
                                    </span>
                                    <span class="posted_in font-size-12">Tags: 
                                        <a href="shop-sidebar.html">dress,</a>
                                        <a href="shop-sidebar.html">fashions,</a>
                                        <a href="shop-sidebar.html">women</a>
                                    </span>
                                </div>
                                <div class="product-share-box mt--40 mt-lg--30 mt-sm--10 pt-sm--1">
                                    <span class="font-size-12">Share With</span>
                                    <!-- Social Icons Start Here -->
                                    <ul class="social social-small">
                                        <li class="social__item">
                                            <a href="facebook.com" class="social__link">
                                                <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="twitter.com" class="social__link">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-pinterest-p"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <!-- Social Icons End Here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center pt--80 pt-md--60 pt-sm--35 mt-md--1 mt-sm--3">
                        <div class="col-12">
                            <div class="product-data-tab tab-style-5">
                                <div class="nav nav-tabs product-data-tab__head mb--35 mb-sm--25" id="product-tab" role="tablist">
                                    <a class="product-data-tab__link nav-link active" id="nav-description-tab" data-toggle="tab" href="#nav-description" role="tab" aria-selected="true"> 
                                        <span>Description</span>
                                    </a>
                                    <a class="product-data-tab__link nav-link" id="nav-info-tab" data-toggle="tab" href="#nav-info" role="tab" aria-selected="true">
                                        <span>Additional Information</span>
                                    </a>
                                    <a class="product-data-tab__link nav-link" id="nav-reviews-tab" data-toggle="tab" href="#nav-reviews" role="tab" aria-selected="true">
                                        <span>Reviews(1)</span>
                                    </a>
                                </div>
                                <div class="tab-content product-data-tab__content" id="product-tabContent">
                                    <div class="tab-pane fade show active" id="nav-description" role="tabpanel" aria-labelledby="nav-description-tab">
                                        <div class="product-description">
                                            <p>Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.

                                            <p>Nunc lacus elit, faucibus ac laoreet sed, dapibus ac mi. Maecenas eu ante a elit tempus fermentum. Aliquam commodo tincidunt semper. Phasellus accumsan, justo ac mollis pharetra, ex dui pharetra nisl, a scelerisque ipsum nulla ac sem. Cras eu risus urna. Duis lorem sapien, congue eget nisl sit amet, rutrum faucibus elit.</p>
                                            
                                            <ul>
                                                <li>Maecenas eu ante a elit tempus fermentum. Aliquam commodo tincidunt semper</li>
                                                <li>Aliquam est et tempus. Eaecenas libero ante, tincidunt vel</li>
                                            </ul>
                                            
                                            <p>Curabitur sodales euismod nibh. Sed iaculis sed orci eget semper. Nam auctor, augue et eleifend tincidunt, felis mauris convallis neque, in placerat metus urna laoreet diam. Morbi sagittis facilisis arcu sed ornare. Maecenas dictum urna ut facilisis rhoncus.iaculis sed orci eget semper. Nam auctor, augue et eleifend tincidunt, felis mauris</p>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="nav-info" role="tabpanel" aria-labelledby="nav-info-tab">
                                        <div class="table-content table-responsive">
                                            <table class="table shop_attributes">
                                                <tbody>
                                                    <tr>
                                                        <th>Weight</th>
                                                        <td>57 kg</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Dimensions</th>
                                                        <td>160 × 152 × 110 cm</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Color</th>
                                                        <td>
                                                            <a href="shop-sidebar.html">Black</a>,
                                                            <a href="shop-sidebar.html">Gray</a>,
                                                            <a href="shop-sidebar.html">Red</a>,
                                                            <a href="shop-sidebar.html">Violet</a>,
                                                            <a href="shop-sidebar.html">Yellow</a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="nav-reviews" role="tabpanel" aria-labelledby="nav-reviews-tab">
                                        <div class="product-reviews">
                                            <h3 class="review__title">1 review for Waxed-effect pleated skirt</h3>
                                            <ul class="review__list">
                                                <li class="review__item">
                                                    <div class="review__container">
                                                        <img th:src="@{/assets/img/others/comment_icon.jpeg}" alt="Review Avatar" class="review__avatar">
                                                        <div class="review__text">
                                                            <div class="product-rating float-right">
                                                                <div class="star-rating star-five">
                                                                    <span>Rated <strong class="rating">5.00</strong> out of 5</span>
                                                                </div>
                                                            </div>
                                                            <div class="review__meta">
                                                                <strong class="review__author">John Snow </strong>
                                                                <span class="review__dash">-</span>
                                                                <span class="review__published-date">November 20, 2018</span>
                                                            </div>
                                                            <div class="clearfix"></div>
                                                            <p class="review__description">Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.</p>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <div class="review-form-wrapper">
                                                <span class="reply-title">Add a review</span>
                                                <form action="#" class="form">
                                                    <div class="form-notes mb--20">
                                                        <p>Your email address will not be published. Required fields are marked <span class="required">*</span></p>
                                                    </div>
                                                    <div class="form__group mb--30 mb-sm--20">
                                                        <div class="revew__rating">
                                                            <p class="stars selected">
                                                                <a class="star-1 active" href="#">1</a>
                                                                <a class="star-2" href="#">2</a>
                                                                <a class="star-3" href="#">3</a>
                                                                <a class="star-4" href="#">4</a>
                                                                <a class="star-5" href="#">5</a>
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <div class="form__group mb--30 mb-sm--20">
                                                        <div class="form-row">
                                                            <div class="col-sm-6 mb-sm--20">
                                                                <label class="form__label" for="name">Name<span class="required">*</span></label>
                                                                <input type="text" name="name" id="name" class="form__input">
                                                            </div>  
                                                            <div class="col-sm-6">
                                                                <label class="form__label" for="email">Email<span class="required">*</span></label>
                                                                <input type="email" name="email" id="email" class="form__input">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form__group mb--30 mb-sm--20">
                                                        <div class="form-row">
                                                            <div class="col-12">
                                                                <label class="form__label" for="email">Your Review<span class="required">*</span></label>
                                                                <textarea name="review" id="review" class="form__input form__input--textarea"></textarea>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form__group">
                                                        <div class="form-row">
                                                            <div class="col-12">
                                                                <input type="submit" value="Submit" class="btn btn-style-1 btn-submit">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pt--65 pt-md--50 pt-sm--30 pb--75 pb-md--55 pb-sm--35 mt--3 mt-md--2">
                        <div class="col-12">
                            <div class="row mb--50 mb-md--40 mb-sm--30">
                                <div class="col-12 text-center">
                                    <h2 class="heading-secondary pb-md--2">Related Products</h2>
                                    <hr class="separator separator-3 separator-color-2 center mt--25 mt-md--20">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="zuka-element-carousel nav-vertical-center nav-style-1" 
                                    data-slick-options='{
                                    "spaceBetween": 30,
                                    "slidesToShow": 4,
                                    "slidesToScroll": 1,
                                    "arrows": true, 
                                    "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "dl-icon-left" },
                                    "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "dl-icon-right" }
                                    }'
                                    data-slick-responsive='[
                                        {"breakpoint":1200, "settings": {"slidesToShow": 3} },
                                        {"breakpoint":991, "settings": {"slidesToShow": 2} },
                                        {"breakpoint":450, "settings": {"slidesToShow": 1} }
                                    ]'
                                    >
                                        <div class="item">
                                            <div class="zuka-product thumb-has-effect">
                                                <div class="product-inner">
                                                    <figure class="product-image">
                                                        <div class="product-image--holder">
                                                            <a href="product-details.html">
                                                                <img th:src="@{/assets/img/products/prod-7-2-500x625.jpg}" alt="Product Image" class="primary-image">
                                                                <img th:src="@{/assets/img/products/prod-7-1-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                            </a>
                                                        </div>
                                                        <div class="zuka-product-action">
                                                            <div class="product-action d-flex flex-column align-items-end">
                                                                <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                                    <span data-toggle="modal" data-target="#productModal">
                                                                        <i class="dl-icon-view"></i>
                                                                    </span>
                                                                </a>
                                                                <a class="add_wishlist action-btn" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                    <i class="dl-icon-heart4"></i>
                                                                </a>
                                                                <a class="add_compare action-btn" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                    <i class="dl-icon-compare"></i>
                                                                </a>
                                                                <a class="add_to_cart_btn action-btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                    <i class="dl-icon-cart29"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                        <span class="product-badge discount">-2%</span>
                                                    </figure>
                                                    <div class="product-info text-center">
                                                        <div class="star-rating star-four">
                                                            <span>Rated <strong class="rating">4.00</strong> out of 5</span>
                                                        </div>
                                                        <h3 class="product-title">
                                                            <a href="product-details.html">Fake News Network Abstract Novelty T-Shirt</a>
                                                        </h3>
                                                        <span class="product-price-wrapper">
                                                            <span class="product-price-old">
                                                                <span class="money">&pound; 49.00</span>
                                                            </span>
                                                            <span class="product-price-new">
                                                                <span class="money">&pound; 48.00</span>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="zuka-product thumb-has-effect">
                                                <div class="product-inner">
                                                    <figure class="product-image">
                                                        <div class="product-image--holder">
                                                            <a href="product-details.html">
                                                                <img th:src="@{/assets/img/products/prod-4-3-500x625.jpg}" alt="Product Image" class="primary-image">
                                                                <img th:src="@{/assets/img/products/prod-4-2-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                            </a>
                                                        </div>
                                                        <div class="zuka-product-action">
                                                            <div class="product-action d-flex flex-column align-items-end">
                                                                <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                                    <span data-toggle="modal" data-target="#productModal">
                                                                        <i class="dl-icon-view"></i>
                                                                    </span>
                                                                </a>
                                                                <a class="add_wishlist action-btn" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                    <i class="dl-icon-heart4"></i>
                                                                </a>
                                                                <a class="add_compare action-btn" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                    <i class="dl-icon-compare"></i>
                                                                </a>
                                                                <a class="add_to_cart_btn action-btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                    <i class="dl-icon-cart29"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </figure>
                                                    <div class="product-info text-center">
                                                        <div class="star-rating star-three">
                                                            <span>Rated <strong class="rating">3.00</strong> out of 5</span>
                                                        </div>
                                                        <h3 class="product-title">
                                                            <a href="product-details.html">Fashion Backpack Oxford Waterproof</a>
                                                        </h3>
                                                        <span class="product-price-wrapper">
                                                            <span class="money">&pound; 159.00</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="zuka-product thumb-has-effect">
                                                <div class="product-inner">
                                                    <figure class="product-image">
                                                        <div class="product-image--holder">
                                                            <a href="product-details.html">
                                                                <img th:src="@{/assets/img/products/prod-10-1-500x625.jpg}" alt="Product Image" class="primary-image">
                                                                <img th:src="@{/assets/img/products/prod-10-3-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                            </a>
                                                        </div>
                                                        <div class="zuka-product-action">
                                                            <div class="product-action d-flex flex-column align-items-end">
                                                                <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                                    <span data-toggle="modal" data-target="#productModal">
                                                                        <i class="dl-icon-view"></i>
                                                                    </span>
                                                                </a>
                                                                <a class="add_wishlist action-btn" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                    <i class="dl-icon-heart4"></i>
                                                                </a>
                                                                <a class="add_compare action-btn" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                    <i class="dl-icon-compare"></i>
                                                                </a>
                                                                <a class="add_to_cart_btn action-btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                    <i class="dl-icon-cart29"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </figure>
                                                    <div class="product-info text-center">
                                                        <div class="star-rating star-five">
                                                            <span>Rated <strong class="rating">5.00</strong> out of 5</span>
                                                        </div>
                                                        <h3 class="product-title">
                                                            <a href="product-details.html">Grey blue leather backpack</a>
                                                        </h3>
                                                        <span class="product-price-wrapper">
                                                            <span class="money">&pound; 159.00</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="zuka-product thumb-has-effect">
                                                <div class="product-inner">
                                                    <figure class="product-image">
                                                        <div class="product-image--holder">
                                                            <a href="product-details.html">
                                                                <img th:src="@{/assets/img/products/prod-8-1-500x625.jpg}" alt="Product Image" class="primary-image">
                                                                <img th:src="@{/assets/img/products/prod-8-2-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                            </a>
                                                        </div>
                                                        <div class="zuka-product-action">
                                                            <div class="product-action d-flex flex-column align-items-end">
                                                                <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                                    <span data-toggle="modal" data-target="#productModal">
                                                                        <i class="dl-icon-view"></i>
                                                                    </span>
                                                                </a>
                                                                <a class="add_wishlist action-btn" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                    <i class="dl-icon-heart4"></i>
                                                                </a>
                                                                <a class="add_compare action-btn" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                    <i class="dl-icon-compare"></i>
                                                                </a>
                                                                <a class="add_to_cart_btn action-btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                    <i class="dl-icon-cart29"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </figure>
                                                    <div class="product-info text-center">
                                                        <div class="star-rating star-four">
                                                            <span>Rated <strong class="rating">4.00</strong> out of 5</span>
                                                        </div>
                                                        <h3 class="product-title">
                                                            <a href="product-details.html">I want to T-Shirt</a>
                                                        </h3>
                                                        <span class="product-price-wrapper">
                                                            <span class="money">&pound; 159.00</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Content Wrapper End -->


        <!-- Footer Start -->
        <footer class="footer footer-3 border-top">
            <div class="footer-top pt--80 pt-md--60">
                <div class="container-fluid">
                    <div class="row footer-row">
                        <div class="footer-column footer-column-1 order-first mb-xl--35 mb-md--30 mb-sm--20">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <div class="textwidget mb--30 mb-sm--20">
                                    <a href="index.html" class="footer-logo">
                                        <img th:src="@{/assets/img/logo/logo.png}" alt="Logo" class="logo-img">
                                    </a>
                                </div>
                                <div class="textwidget mr--40 mr-sm--0">
                                    <p>Integer ut ligula quis lectus fringilla elementum porttitor sed est. Duis fringilla efficitur ligula sed lobortis.</p>
                                </div>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-2 order-xl-2 order-3 mb-sm--30 mb-xs--25">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">Helful Link</h3>
                                <ul class="widget-menu">
                                    <li><a href="shop-collections.html">The Collections</a></li>
                                    <li><a href="#">Size Guide</a></li>
                                    <li><a href="#">Return Policy</a></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-3 order-xl-3 order-4 mb-sm--30">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25">Company Link</h3>
                                <ul class="widget-menu">
                                    <li><a href="about-us.html">About Us</a></li>
                                    <li><a href="shop-collections.html">Portfolios</a></li>
                                    <li><a href="#">Our Services</a></li>
                                    <li><a href="#">Affiliate Program</a></li>
                                    <li><a href="#">Work for Zuka</a></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-4 order-xl-4 order-5 mb-xs--25">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25">Openning Time</h3>
                                <ul class="widget-menu">
                                    <li><span>Monday – Saturday</span></li>
                                    <li><span>7:00 – 22:00</span></li>
                                    <li><span>Sunday</span></li>
                                    <li><span>9:00 – 20:00</span></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-5 order-xl-5 order-6">
                            <!-- Contact Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">Contact Info</h3>
                                <div class="widget_contact_info">
                                    <ul>
                                        <li><i class="fa fa-phone"></i><span>(+612) 2531 5600</span></li>
                                        <li><i class="fa fa-envelope"></i><a href="mailto:info@company.com">info@company.com</a></li>
                                        <li><i class="fa fa-map-marker"></i><span>Get direction</span></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Contact Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-6 order-xl-6 order-2 mb-xl--35 mb-md--30 mb-xs--25">
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">MailChimp Signup Form</h3>
                                <!-- Subscribe widget Start Here -->
                                <div class="subscribe-widget mb--30">
                                    <form action="https://company.us19.list-manage.com/subscribe/post?u=2f2631cacbe4767192d339ef2&amp;id=24db23e68a" class="newsletter-form mc-form" method="post" target="_blank">
                                        <input type="email" name="EMAIL" id="newsletter_email" placeholder="Enter your email address.." required="required" class="newsletter-form__input">
                                        <button type="submit" class="newsletter-form__submit">Submit</button>
                                    </form>
                                </div>
                                <!-- Subscribe widget End Here -->

                                <!-- Social Icons Start Here -->
                                <ul class="social social-medium">
                                    <li class="social__item">
                                        <a href="https://twitter.com" class="social__link">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://plus.google.com" class="social__link">
                                            <i class="fa fa-google-plus"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://facebook.com" class="social__link">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://youtube.com" class="social__link">
                                            <i class="fa fa-youtube"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://instagram.com" class="social__link">
                                            <i class="fa fa-instagram"></i>
                                        </a>
                                    </li>
                                </ul>
                                <!-- Social Icons End Here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom pt--45 pb--50 pb-xs--45">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <p class="copyright-text">&copy; 2018 ZUKA. Designed by HasTech</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Search from Start --> 
        <div class="searchform__popup" id="searchForm">
            <a href="#" class="btn-close"><i class="dl-icon-close"></i></a>
            <div class="searchform__body">
                <p>Start typing and press Enter to search</p>
                <form class="searchform">
                    <input type="text" name="popup-search" id="popup-search" class="searchform__input" placeholder="Search Entire Store...">
                    <button type="submit" class="searchform__submit"><i class="dl-icon-search10"></i></button>
                </form>
            </div>
        </div>
        <!-- Search from End --> 
        
        <!-- Side Navigation Start -->
        <aside class="side-navigation" id="sideNav">
            <div class="side-navigation-wrapper">
                <div class="side-navigation-inner">
                    <div class="widget mb--30">
                        <ul class="sidenav-menu">
                            <li><a href="about-us.html">About Us</a></li>
                            <li><a href="shop-collections.html">Portfolios</a></li>
                            <li><a href="contact-us.html">Our Services</a></li>
                            <li><a href="#">Affiliate Program</a></li>
                            <li><a href="#">Work For Zuka</a></li>
                        </ul>
                    </div>
                    <div class="widget mb--30">
                        <div class="banner-box banner-type-1 banner-hover-1">
                            <div class="banner-inner">
                                <div class="banner-image">
                                    <img th:src="@{/assets/img/banner/menu-humberger.jpg}" alt="Banner">
                                </div>
                                <div class="banner-info">
                                    <a class="banner-title-1 text-uppercase" href="shop-sidebar.html">New</a>
                                </div>
                                <a class="banner-link banner-overlay" href="shop-sidebar.html">New</a>
                            </div>
                        </div>
                    </div>
                    <div class="widget mb--30">
                        <div class="text-widget">
                            <p>
                                <a href="#">(+612) 2531 5600</a>
                                <a href="mailto:info@la-studioweb.com">info@la-studioweb.com</a>
                                PO Box 1622 Colins Street West
                            </p>
                        </div>
                    </div>
                    <div class="widget mb--5">
                        <div class="text-widget google-map-link">
                            <p>
                                <a href="https://www.google.com/maps" target="_blank">Google Maps</a>
                            </p>
                        </div>
                    </div>
                    <div class="widget">
                        <div class="text-widget">
                            <!-- Social Icons Start Here -->
                            <ul class="social social-small">
                                <li class="social__item">
                                    <a href="twitter.com" class="social__link">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="plus.google.com" class="social__link">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="facebook.com" class="social__link">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="youtube.com" class="social__link">
                                        <i class="fa fa-youtube"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="instagram.com" class="social__link">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                </li>
                            </ul>
                            <!-- Social Icons End Here -->
                        </div>
                    </div>
                    <div class="widget mtb--15">
                        <div class="text-widget">
                            <p>
                                <img th:src="@{/assets/img/others/payments.png}" alt="payment">
                            </p>
                        </div>
                    </div>
                    <div class="widget">
                        <div class="text-widget">
                            <p class="copyright-text">&copy; 2018 Zuka Shop All rights <a href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Side Navigation End -->

        <!-- Mini Cart Start -->
        <aside class="mini-cart" id="miniCart">
            <div class="mini-cart-wrapper">
                <a href="" class="btn-close"><i class="dl-icon-close"></i></a>
                <div class="mini-cart-inner">
                    <h5 class="mini-cart__heading mb--40 mb-lg--30">Shopping Cart</h5>
                    <div class="mini-cart__content">
                        <ul class="mini-cart__list">
                            <li class="mini-cart__product">
                                <a href="#" class="remove-from-cart remove">
                                    <i class="dl-icon-close"></i>
                                </a>
                                <div class="mini-cart__product__image">
                                    <img th:src="@{/assets/img/products/prod-26-1-70x88.jpg}" alt="products">
                                </div>
                                <div class="mini-cart__product__content">
                                    <a class="mini-cart__product__title" href="single-product.html">Atlin Designs Mid Century Club Chair</a>
                                    <span class="mini-cart__product__quantity">1 x &pound;49.00</span>
                                </div>
                            </li>
                            <li class="mini-cart__product">
                                <a href="#" class="remove-from-cart remove">
                                    <i class="dl-icon-close"></i>
                                </a>
                                <div class="mini-cart__product__image">
                                    <img th:src="@{/assets/img/products/prod-30-1-70x88.jpg}" alt="products">
                                </div>
                                <div class="mini-cart__product__content">
                                    <a class="mini-cart__product__title" href="single-product.html">Waxed-effect pleated skirt</a>
                                    <span class="mini-cart__product__quantity">1 x &pound;49.00</span>
                                </div>
                            </li>
                            <li class="mini-cart__product">
                                <a href="#" class="remove-from-cart remove">
                                    <i class="dl-icon-close"></i>
                                </a>
                                <div class="mini-cart__product__image">
                                    <img th:src="@{/assets/img/products/prod-29-1-70x88.jpg}" alt="products">
                                </div>
                                <div class="mini-cart__product__content">
                                    <a class="mini-cart__product__title" href="single-product.html">Waxed-effect pleated skirt</a>
                                    <span class="mini-cart__product__quantity">1 x &pound;49.00</span>
                                </div>
                            </li>
                            <li class="mini-cart__product">
                                <a href="#" class="remove-from-cart remove">
                                    <i class="dl-icon-close"></i>
                                </a>
                                <div class="mini-cart__product__image">
                                    <img th:src="@{/assets/img/products/prod-31-1-70x88.jpg}" alt="products">
                                </div>
                                <div class="mini-cart__product__content">
                                    <a class="mini-cart__product__title" href="single-product.html">Waxed-effect pleated skirt</a>
                                    <span class="mini-cart__product__quantity">1 x &pound;49.00</span>
                                </div>
                            </li>
                        </ul>
                        <div class="mini-cart__total">
                            <span>Subtotal:</span>
                            <span class="ammount">&pound;98.00</span>
                        </div>
                        <div class="mini-cart__buttons">
                            <a href="cart.html" class="btn btn-fullwidth btn-style-1">View Cart</a>
                            <a href="checkout.html" class="btn btn-fullwidth btn-style-1">Checkout</a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Mini Cart End -->

        <!-- Global Overlay Start -->
        <div class="zuka-global-overlay"></div>
        <!-- Global Overlay End -->
 
        <!-- Modal Start -->
        <div class="modal fade product-modal" id="productModal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <button type="button" class="close custom-close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><i class="dl-icon-close"></i></span>
                </button>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="zuka-element-carousel product-image-carousel nav-vertical-center nav-style-1"
                                data-slick-options='{
                                    "slidesToShow": 1,
                                    "slidesToScroll": 1,
                                    "arrows": true,
                                    "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "dl-icon-left" },
                                    "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "dl-icon-right" }
                                }'
                        >
                            <div class="product-image">
                                <div class="product-image--holder">
                                    <a href="single-product.html">
                                        <img th:src="@{/assets/img/products/prod-7-1.jpg}" alt="Product Image" class="primary-image">
                                    </a>
                                </div>
                                <span class="product-badge sale">sale</span>
                            </div>
                            <div class="product-image">
                                <div class="product-image--holder">
                                    <a href="single-product.html">
                                        <img th:src="@{/assets/img/products/prod-7-2.jpg}" alt="Product Image" class="primary-image">
                                    </a>
                                </div>
                                <span class="product-badge sale">sale</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="modal-box product-summary">
                            <div class="product-top-meta d-flex justify-content-between flex-sm-row flex-column-reverse">
                                <div class="product-rating d-flex">
                                    <div class="star-rating star-five">
                                        <span>Rated <strong class="rating">5.00</strong> out of 5</span>
                                    </div>
                                    <a href="" class="review-link">(1 customer review)</a>
                                </div>
                                <div class="product-navigation">
                                    <a href="#" class="prev"><i class="dl-icon-left"></i></a>
                                    <a href="#" class="next"><i class="dl-icon-right"></i></a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <h3 class="product-title mb--30 mb-md--20">Fake News Network Abstract Novelty T-Shirt</h3>
                            <div class="product-price-wrapper mb--30 mb-md--20">
                                <span class="product-price-old">
                                    <span class="money">&pound;60.00</span>
                                </span>
                                <span class="money">&pound;49.00</span>
                            </div>
                            <p class="product-short-description mb--30 mb-md--20">Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.</p>
                            <div class="product-action d-flex flex-row align-items-center mb--20">
                                <div class="quantity mr--20">
                                    <input type="number" class="quantity-input" name="qty" id="quick-qty" value="1" min="1">
                                </div>
                                <button type="button" class="btn btn-style-1 btn-semi-large btn-shape-round add-to-cart" onclick="window.location.href='cart.html'">
                                    Add To Cart
                                </button>
                                <a href="wishlist.html" class="action-btn action-btn-square"><i class="dl-icon-heart2"></i></a>
                                <a href="compare.html" class="action-btn action-btn-square"><i class="dl-icon-compare2"></i></a>
                            </div>  
                            <div class="product-extra mb--20">
                                <a href="#" class="font-size-12"><i class="fa fa-map-marker"></i>Find store near you</a>
                                <a href="#" class="font-size-12"><i class="fa fa-exchange"></i>Delivery and return</a>
                            </div>
                            <div class="product-summary-footer">
                                <div class="product-meta mb--20">
                                    <span class="sku_wrapper font-size-12">SKU: <span class="sku">REF. LA-887</span></span>
                                    <span class="posted_in font-size-12">Categories: <a href="shop-sidebar.html" rel="tag">Fashions</a></span>
                                </div>
                                <div class="product-share-box">
                                    <span class="font-size-12">Share With</span>
                                    <!-- Social Icons Start Here -->
                                    <ul class="social social-small">
                                        <li class="social__item">
                                            <a href="facebook.com" class="social__link">
                                                <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="twitter.com" class="social__link">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-pinterest-p"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <!-- Social Icons End Here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal End -->

    </div>
    <!-- Main Wrapper End -->


    <!-- ************************* JS Files ************************* -->

    <!-- All Plugins Js -->
    <script th:src="@{/assets/js/plugins.js}"></script>

    <!-- Main JS -->
    <script th:src="@{/assets/js/main.js}"></script>

    <!-- REVOLUTION JS FILES -->
    <script th:src="@{/assets/js/revoulation/jquery.themepunch.tools.min.js}"></script>
    <script th:src="@{/assets/js/revoulation/jquery.themepunch.revolution.min.js}"></script>    

    <!-- REVOLUTION ACTIVE JS FILES -->
    <script th:src="@{/assets/js/revoulation.js}"></script>

<script>
    function  addToCart(elem, gid, uid) {
        $.ajax(
            {
                url: "/shop/addToCart?gid=" + gid+"&uid"+uid,
                type: "post",
                success: function (data) {
                    if(data == true) {
                        $(elem).parent().parent().remove();
                    } else {
                        console.log("失败");
                    }
                },
                fail: function (data) {
                    console.log(data);
                }
            }
        )
    }
</script>
</body>

</html>